<template>
  <div class="shop-content">
    <div class="shop-item">
      <div>
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="(item, index) in this.x_getGoodList"
            :key="'left_' + index"
            :title="item.name"
            @click="clickscroll(item.name)"
          />
        </van-sidebar>
      </div>
    </div>

    <div class="shop-link">
      <div>
        <div
          v-for="(item, index) in this.x_getGoodList"
          :key="'right_' + index"
          :id="item.name"
        >
          <div>{{ item.name }}</div>
          <van-card
            v-for="(child, i) in item.foods"
            :key="i"
            num="1"
            :price="child.price"
            :desc="child.goodsDesc"
            :title="child.name"
            :thumb="child.imgUrl"
            @click-thumb="clickJump(child)"
          >
            <template #tags>
              <van-tag plain type="danger">标签</van-tag>
              <van-tag plain type="danger">标签</van-tag>
            </template>
            <template #footer>
              <van-stepper
                v-model="child.num"
                min="0"
                theme="round"
                bustton-size="22"
                disable-input
                :show-minus="child.num>0"
                :show-input="child.num>0"
              />
            </template>
          </van-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { goodsgoodslist } from "@/apis/apis";
import Bscroll from "better-scroll";
export default {
  data() {
    return {
      activeKey: 0,
    };
  },
  created() {
    goodsgoodslist().then((res) => {
      if(this.$store.state.goodsList.length>0) return
      //把响应的数据传给Vuex里的goodsList
      this.$store.commit("changeGoodsList",res.data.goodsList)

      //等页面第二次渲染更新后执行
      this.$nextTick(() => {
        this.motionBscroll()
      });
    });
  },
  mounted(){
    this.motionBscroll()
  },
  methods: {
    clickscroll(title) {
      this.right.scrollToElement(document.getElementById(title), 500);
    },

    clickJump(info){
      this.$router.push({path:"/shopinfo",query:{info,ratings:info.ratings}})
    },

    //运行Bscroll
    motionBscroll(){
      new Bscroll(".shop-item", {
          click: true,
        });
        this.right = new Bscroll(".shop-link", {
          click: true,
          probeType: 3,
        });

        this.right.on("scroll", (position) => {
          let _y = Math.abs(position.y);
          for (let obj of this.getHeight) {
            if (_y >= obj.min && _y < obj.max) {
              this.activeKey = obj.index;
            }
          }
        });
    },
  },
  computed: {
    //从Vuex获取数据列表
    x_getGoodList(){
      return this.$store.state.goodsList      
    },

    //获取每个div盒子的高度，处理成一个对象，放入一个数组中
    getHeight() {
      let heightarr = [];
      let index = 0;
      let total = 0;
      for (let obj of this.x_getGoodList) {
        let divHeight = document.getElementById(obj.name).offsetHeight;
        heightarr.push({ min: total, max: total + divHeight, index: index++ });
        total += divHeight;
      }
      return heightarr;
    },
  },
};
</script>

<style lang="less" scoped>
.shop-content {
  width: 100%;
  flex: 1;
  display: flex;
  overflow: hidden;
  padding-bottom: 60px;
  .shop-item {
    width: 80px;
    height: 100%;
    overflow: scroll;
    margin-bottom: 100px;
  }
  .shop-link {
    height: 100%;
    flex: 1;
    height: 100%;
    overflow-y: scroll;
  }
}
</style>
